.user-avatar-with-name {
  display: flex;
  align-items: center;
  gap: 8px;

  &.vertical {
    .user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .user-name {
        font-size: 14px;
        color: #121212;
      }

      .user-subtitle {
        font-size: 12px;
        color: rgba(18, 18, 18, 0.5);
      }
    }
  }

  .user-name {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .user-description {
      font-size: 14px;
      color: rgba(18, 18, 18, 0.3);
      margin-left: 4px;
    }
  }

  .user-subtitle {
    font-size: 12px;
    color: #666;
  }
}
